<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script src="../lib/three.js/build/three.min.js"></script>
<script type="text/javascript">
    var scene = null;
    var camera = null;
    var renderer = null;

    var cube = null;
    var alpha = 0;

    function init() {
        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas')    //绑定元素
        });
        renderer.shadowMapEnabled = true;  //打开渲染器的地图阴影
        scene = new THREE.Scene();  //创建场景

        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);        //创建照相机 加入到场景中
        camera.position.set(5, 15, 25);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);

        var plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8, 16, 16),           //绘制平面 加入材质
            new THREE.MeshLambertMaterial({ color: 0xcccccc }));
        plane.rotation.x = -Math.PI / 2;
        plane.position.y = -1;
        plane.receiveShadow = true;     //地面接收阴影 true
        scene.add(plane);
        
        cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),              //创建立方体 加入材质
            new THREE.MeshLambertMaterial({ color: 0x00ff00 }));
        cube.position.x = 2;
        cube.castShadow = true;     //物体产生阴影
        scene.add(cube);

        var light = new THREE.SpotLight(0xffff00, 1, 100, Math.PI / 6, 25);  //创建光线   聚光灯
        light.position.set(2, 5, 3);
        light.target = cube;
        light.castShadow = true;   //灯光生成阴影
        scene.add(light);

        // ambient light
        var ambient = new THREE.AmbientLight(0x666666);
        scene.add(ambient);

        requestAnimationFrame(draw);
    }

    function draw() {
        alpha += 0.01;
        if (alpha > Math.PI * 2) {
            alpha -= Math.PI * 2;
        }
        cube.position.set(2 * Math.cos(alpha), 0, 2 * Math.sin(alpha));
        renderer.render(scene, camera);
        requestAnimationFrame(draw);
    }

</script>
</body>

</html>

<!--
    聚光灯是一种特殊的点光源，它能够朝着一个方向投射光线。聚光灯投射出的
是类似圆锥形的光线，这与我们现实中看到的聚光灯是一致的。
    其构造函数为：
THREE.SpotLight(hex, intensity, distance, angle, exponent)
相比点光源，多了 angle 和 exponent 两个参数。 angle 是聚光灯的张角，缺省值是
Math.PI / 3 ，最大值是 Math.PI / 2 ； exponent 是光强在偏离 target 的衰减指数
（ target 需要在之后定义，缺省值为 (0, 0, 0) ），缺省值是 10 。
    在调用构造函数之后，除了设置光源本身的位置，一般还需要设置 target ：
light.position.set(x1, y1, z1);
light.target.position.set(x2, y2, z2);
    除了设置 light.target.position 的方法外，如果想让聚光灯跟着某一物体移动（就像真
的聚光灯！），可以 target 指定为该物体：


-->